<template>
<div class="inp">
  <div class="inp-title"><span>{{ title }}</span></div>
  <div class="inp-box">
    <!-- 一般用于￥等标签 -->
    <slot name="icon"></slot>
    <div class="input">
      <input v-model="tmpValue" inputmode="decimal" maxlength="10" @input="oninput">
      <span v-show="showPlaceholder" class="placeholder">{{ placeholder }}</span>
    </div>
    <a href="javascript:;" class="close" v-if="showClose" @click="close"></a>
    <a href="javascript:;" class="total" v-if="showTotal & !showClose" @click="setAmount()">全部</a>
  </div>
</div>
</template>
<script>
let AppUtils;
export default {
  props: {
    // 默认的输入数据
    value: {
      type: [String, Number],
      required: false
    },
    // 默认不展示输入数据
    showMeta: {
      type: Boolean,
      default: false
    },
    // 默认的“全部”数据
    total: {
      type: [String, Number],
      required: false
    },
    // 默认不展示“全部”按钮
    showTotal: {
      type: Boolean,
      default: false
    },
    // 输入框前的标题
    title: {
      type: String
    },
    // placeholder
    placeholder: {
      type: String
    }
  },
  data() {
    return {
      isInit: true, // 记录初始化
      tmpValue: '' // 当前输入框数值
    };
  },
  computed: {
    showClose() {
      const reg = /^\d+(\.\d+)?$/;
      return this.tmpValue != null && this.tmpValue !== '' && reg.test(this.tmpValue);
    },
    showPlaceholder() {
      return (`${this.tmpValue}`).trim() === '';
    }
  },
  beforeMount() {
    AppUtils = require('@/utils/appUtils').default;
  },
  mounted() {
    this.tmpValue = this.value;
  },
  methods: {
    close() {
      this.tmpValue = '';
    },
    setAmount() {
      this.tmpValue = this.total;
    },
    oninput() {
      // 控制输入的金额
      this.tmpValue = this.tmpValue.replace(/[^\d.]/g, ''); // 清除“数字”和“.”以外字符
      this.tmpValue = this.tmpValue.replace(/^\./g, ''); // 验证第一个字符是数字而不是.
      this.tmpValue = this.tmpValue.replace(/\.{2,}/g, '.'); // 只保留第一个.清除多余的
      this.tmpValue = this.tmpValue.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
      this.tmpValue = this.tmpValue.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两个小数
      this.tmpValue = this.tmpValue.replace(/^0\d/g, '0'); // 第一个字符为0时，后面只能是.
    }
  },
  watch: {
    value() {
      this.tmpValue = this.value;
    },
    tmpValue() {
      this.$emit('input', this.tmpValue);
    }
  }
};
</script>
<style lang="less" scoped>
.inp{
  .inp-title{
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    color: #333;
    line-height: 2em;
    .text-rule{
      font-size: 14px;
      color: #333;
    }
  }
  .inp-box{
    display: flex;
    padding: 10px 0;
    .icon{
      width: 18px;
      height: auto;
      background: url('../../assets/images/icon/icon_common_money@2x.png') center no-repeat;
      background-size: contain;
      display: inline-block;
      margin-right: 10px;
    }
    .input{
      flex: 1;
      position: relative;
      input{
        font-size: 24px;
        color: #333;
        font-weight: bold;
        width: 100%;
        z-index: 2;
        line-height: 34px;
        position: relative;
        background: transparent;
      }
      .placeholder{
        font-size: 24px;
        color: #dbdbdb;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        line-height: 34px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
      }
    }
    a.close, a.total{
      width: 50px;
      height: 34px;
      line-height: 34px;
      text-align: right;
      display: inline-block;
    }
    a.close{
      background: url('../../assets/images/icon/icon_common_delete@2x.png') center right no-repeat;
      background-size: 20px 20px;
    }
    a.total{
      color: #333;
    }
  }
}
</style>
